<template>
  <h2>查看员工信息</h2>
  <el-divider />
  <el-card style="max-width: 100vw;">
    <template #header>
      <span>基础信息</span>
    </template>
    <table>
      <tr>
        <td style="text-align: right; padding-right: 10px;">员工姓名:</td>
        <td style="text-align: left;">{{ empAdd.empname }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">邮箱:</td>
        <td style="text-align: left;">{{ empAdd.email }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">所属部门:</td>
        <td style="text-align: left;">{{ empAdd.deptName }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">职位:</td>
        <td style="text-align: left;">{{ empAdd.positionName }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">性别:</td>
        <td style="text-align: left;">{{ empAdd.sex }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">入职时间:</td>
        <td style="text-align: left;">{{ empAdd.entryDate }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">出生日期:</td>
        <td style="text-align: left;">{{ empAdd.birthday }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">婚姻状况:</td>
        <td style="text-align: left;">{{ empAdd.marryStatus }}</td>
      </tr>
      <tr>
        <td style="text-align: right; padding-right: 10px;">工作开始时间:</td>
        <td style="text-align: left;">{{ empAdd.workStartDate }}</td>
      </tr>
    </table>
  </el-card>

  <el-divider />

  <el-descriptions v-for="item in deptEmp" title="部门履历信息" direction="vertical" :column="4" :size="size" border>
    <el-descriptions-item label="员工姓名">{{ item.empName }}</el-descriptions-item>
    <el-descriptions-item label="部门名称">{{ item.deptName }}</el-descriptions-item>
    <el-descriptions-item label="开始日期">{{ item.startDate }}</el-descriptions-item>
    <el-descriptions-item label="结束日期">{{ item.endDate }}</el-descriptions-item>
  </el-descriptions>

  <br>

  <el-descriptions v-for="item in empPosition" style="padding-bottom: 50px;" title="职位履历信息" direction="vertical"
    :column="4" :size="size" border>
    <el-descriptions-item label="员工姓名">{{ item.empName }}</el-descriptions-item>
    <el-descriptions-item label="职位名称">{{ item.positionName }}</el-descriptions-item>
    <el-descriptions-item label="开始日期">{{ item.startDate }}</el-descriptions-item>
    <el-descriptions-item label="结束日期">{{ item.endDate }}</el-descriptions-item>
  </el-descriptions>
</template>

<script name='Empinfo' setup lang='ts'>
import { ref, onMounted } from 'vue';
import { type EmpPositionRsp, type ApiResponse, type DeptEmpRsp, type EmpAdd } from '../model';
import { getDeptEmp, getOneEmp, getPositionsEmp } from '../api';
import { useRoute } from 'vue-router';
import { dayjs } from 'element-plus';
import { useEmpStore } from '../store/emp';

const route = useRoute();
const pageSize = ref(5)
const pageNum = ref(1)
const total = ref(0)

let { empInfo } = useEmpStore();

let apiResponse = ref<ApiResponse<[]>>({
  code: 0,
  message: '',
  data: []
})

let empAdd = ref<EmpAdd>({
  id: null,
  no: '',
  empname: '',
  email: '',
  account: '',
  password: '',
  sex: '',
  entryDate: new Date(''),
  birthday: new Date(''),
  marryStatus: '',
  workStartDate: new Date(''),
  deptId: '',
  deptName: '',
  positionId: '',
  positionName: '',
  authorityId: '',
  authorityName: '',
  avatar: null,
  status: null
})

let deptEmp = ref<DeptEmpRsp[]>([{
  empId: null,
  empName: '',
  deptId: null,
  deptName: '',
  startDate: new Date(''),
  endDate: new Date('')
}])

let empPosition = ref<EmpPositionRsp[]>([{
  empId: null,
  empName: '',
  positionId: null,
  positionName: '',
  startDate: new Date(''),
  endDate: new Date('')
}])



onMounted(() => {
  if (!route.query.id) {
    empAdd.value.id = empInfo!.id
    console.log("empadd.id1:", empAdd.value.id);
  }
  else {
    empAdd.value.id = Number(route.query.id);
    console.log("empadd.id2:", empAdd.value.id);
  }
  getOneEmp(empAdd.value.id!).then(res => {
    empAdd.value = res.t;
    if (empAdd.value.sex === 2) {
      empAdd.value.sex = '女';
    } else {
      empAdd.value.sex = '男';
    }
    if (empAdd.value.marryStatus === 1) {
      empAdd.value.marryStatus = '未婚';
    } else {
      empAdd.value.marryStatus = '已婚';
    }
    if (!empAdd.value.birthday) return ""; // 如果日期为空，返回空字符串
    empAdd.value.birthday = dayjs(empAdd.value.birthday).format("YYYY年MM月DD日");

    if (!empAdd.value.entryDate) return ""; // 如果日期为空，返回空字符串
    empAdd.value.entryDate = dayjs(empAdd.value.entryDate).format("YYYY年MM月DD日");

    if (!empAdd.value.workStartDate) return ""; // 如果日期为空，返回空字符串
    empAdd.value.workStartDate = dayjs(empAdd.value.workStartDate).format("YYYY年MM月DD日");
  }
  )

  getDeptEmp(empAdd.value.id!).then(res => {
    console.log("empAdd.value.id", empAdd.value.id);
    deptEmp.value = res.t;
    console.log(res);
    console.log("deptEmp", deptEmp.value);
    console.log(empAdd.value.id);
    for (let i = 0; i < deptEmp.value.length; i++) {
      if (!deptEmp.value[i].startDate) return ""; // 如果日期为空，返回空字符串
      deptEmp.value[i].startDate = dayjs(deptEmp.value[i].startDate).format("YYYY年MM月DD日");

      if (!deptEmp.value[i].endDate) return ""; // 如果日期为空，返回空字符串
      deptEmp.value[i].endDate = dayjs(deptEmp.value[i].endDate).format("YYYY年MM月DD日");
    }
    console.log(deptEmp.value)
  }
  )

  getPositionsEmp(empAdd.value.id!).then(res => {
    empPosition.value = res.t;
    console.log("empPosition", empPosition.value);
    for (let i = 0; i < empPosition.value.length; i++) {
      if (!empPosition.value[i].startDate) return ""; // 如果日期为空，返回空字符串
      empPosition.value[i].startDate = dayjs(empPosition.value[i].startDate).format("YYYY年MM月DD日");

      if (!empPosition.value[i].endDate) return ""; // 如果日期为空，返回空字符串
      empPosition.value[i].endDate = dayjs(empPosition.value[i].endDate).format("YYYY年MM月DD日");
    }
    console.log(empPosition.value)
  })

})
</script>

<style scoped></style>
